import React, { useEffect, useState} from 'react'
import ReactECharts from 'echarts-for-react'
import Service from '../../../../../service'

const Index=()=> {
  

  useEffect(()=>{
    getContractAllByStaff()
    getContractMonthByStaff()
    getContractWeekByStaff()
  },[])
  // 总记录请求的缓存数据
  const [requestOrderAllData,setRequestData] = useState([])
  const [requestOrderMonthData,setOrderMonthData] = useState([])   // 30天数据请求
  const [requestOrderWeekData,setOrderWeekData] = useState([])   // 7天数据请求
  // 跟单统计总记录
  const getContractAllByStaff = async ()=>{
    let result = await Service.dataAnalysis.allOrderByStaff()
    console.log(result);
    setRequestData(result.data)
  }
  const [xarr,setXarr] = useState([])  // x轴数据
  const [yarrStaffAll,setYarrAllStaff] = useState([])  // y轴总记录数据
  const [yarrStaffMonth,setYarrStaffMonth] = useState([])  // y轴总记录数据
  const [yarrStaffWeek,setYarrStaffWeek] = useState([])  // y轴总记录数据

  // 获取x轴和总记录的y轴
  useEffect(()=>{
    let temarr = []
    let allData = []
    requestOrderAllData.map(item=>{
      temarr.push(item.gd_person)
      allData.push(JSON.stringify(item).match(/\d+/)[0])
    })
    setXarr(temarr);
    setYarrAllStaff(allData);
  },[requestOrderAllData])

  // 跟单统计30天总记录
  const getContractMonthByStaff = async ()=>{
    let result = await Service.dataAnalysis.monthOrderByStaff()
    setOrderMonthData(result.data)
  }
  useEffect(()=>{
    let allData = []
    requestOrderMonthData.map(item=>{
      allData.push(JSON.stringify(item).match(/\d+/)[0])
    })
    setYarrStaffMonth(allData);
  },[requestOrderMonthData])

  // 跟单统计7天总记录
  const getContractWeekByStaff = async ()=>{
    let result = await Service.dataAnalysis.weekOrderByStaff()
    setOrderWeekData(result.data)
  }
  useEffect(()=>{
    let allData = []
    requestOrderWeekData.map(item=>{
      allData.push(JSON.stringify(item).match(/\d+/)[0])
    })
    setYarrStaffWeek(allData);
  },[requestOrderWeekData])

  let option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['7天记录', '30天记录', '全部记录']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: xarr
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '7天记录',
        type: 'line',
        stack: 'Total',
        data: yarrStaffWeek
      },
      {
        name: '30天记录',
        type: 'line',
        stack: 'Total',
        data: yarrStaffMonth
      },
      {
        name: '全部记录',
        type: 'line',
        stack: 'Total',
        data: yarrStaffAll
      }
    ]
  };
  return (
    <div>
      <div className='staffTitle' style={{
        backgroundColor:"#eff0ef",
        color:"black",
        fontWeight:700,
        height:"33px",
        lineHeight:"33px",
        paddingLeft:"5px"
        }}>按员工统计</div>
      <ReactECharts option={option} style={{width:"auto",height:"550px"}}/>
    </div>
  )
}

export default React.memo(Index) 
